import * as React from 'react'
import classnames from "classnames";
import styles from './index.less'
import * as TYPINGS from "@/typings/index";
import * as UTILS from "@/utils/index";

const { useState, useEffect, useRef } = React
const VideoContainer: React.FC<any> = (props: any) => {
  const [isApple, setIsApple] = useState(false);
  const [isShowVideo, setIsShowVideo] = useState(false);
  const [videoUrl, setVideoUrl] = useState<string>("");
  // const [isVertical, setIsVertical] = useState(true);
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const os = UTILS.getSystem();
    setIsApple(os === 'iOS');
    // const URL_VMONSTER2 = "https://ss.bscstorage.com/resource.alilo.com.cn-chenjun/h5/hht-kids-song/vmonster.mp4";
    const URL_VMONSTER2 = "https://c.weimobwmc.com/saas-wxbiz/ef3afdf373284894af68df110c6700a6.mp4";
    
    setVideoUrl(URL_VMONSTER2);
  }, [])

  useEffect(() => {
    const url = props.url;
    if (url) setIsShowVideo(true);
  }, [props.url])

  const handleEvent = (e: any) => {
    props.playing();
  }



  return (
    <div
      className={styles.wrapper}
    >
      {
        isShowVideo && <video
          controls
          className={styles.videoWrapper}
          onPlaying={handleEvent}
          ref={videoRef}
          controlsList="nodownload"
          poster={props.poster}
        >

          {
            <source
              src={videoUrl} type="video/mp4"
            />
          }

          Your browser does not support the video tag.
        </video>
      }

      {/* <button onClick={handlePlay} style={{ marginTop: '123px' }}>play</button> */}
    </div >
  )
}

export default VideoContainer
